<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>简易计算器</title>
	<style>
		* {
			padding: 0;
			margin: 0;
		}

		li {
			list-style: none;
		}

		#result {
			outline: none;
		}

		#counter {
			width: 400px;
			height: 470px;
			background: linear-gradient(to bottom, #e99f64 0%, #86890c 100%);
			margin: 50px auto 0;
			position: relative;
			border-radius: 10px;
			overflow: hidden;
		}

		#counter h2 {
			line-height: 42px;
			/* padding-left: 15px; */
			font-size: 24px;
			font-family: arial;
			color: #fff;
			text-align: center;
			margin-top: 50px;
			letter-spacing: 3px;
		}

		#counter a {
			font-weight: normal;
			text-decoration: none;
			color: #ff3333;
		}

		#counter a:hover {
			text-decoration: underline;
		}

		#bg {
			width: 280px;
			height: 200px;
			border: 3px solid #680023;
			background: #990033;
			filter: alpha(opacity=80);
			opacity: 0.8;
			position: absolute;
			left: 50%;
			top: 115px;
			margin-left: -141px;
		}

		#counter_content {
			width: 250px;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -45%);
			z-index: 1;
		}

		#counter_content h3 {
			margin-bottom: 10px;
		}

		#counter_content h3 input {
			border: none;
			width: 223px;
			height: 30px;
			line-height: 30px;
			padding: 0 10px;
			background: url(img/ico.png) no-repeat;
			text-align: right;
			color: #333;
			font-size: 14px;
			font-weight: bold;
		}

		#counter_content div {
			width: 250px;
		}

		#counter_content input {
			width: 60px;
			height: 30px;
			line-height: 30px;
			float: left;
			background: url(img/ico.png) no-repeat -303px 0;
			text-align: center;
			color: #fff;
			cursor: pointer;
			margin: 0 1px 4px 0;
			border: 0;
		}

		#counter_content div>input:hover {
			background: url(img/ico.png) no-repeat -243px 0;
		}

		#counter p {
			width: 500px;
			position: absolute;
			bottom: 20px;
			left: 0;
			color: #ff3333;
			text-align: center;
			font-size: 12px;
		}
	</style>
</head>

<body>
	<div id="counter">
		<h2>简易计算器</h2>
		<div id="counter_content">
			<h3><input id="result" type="text" value="0" disabled /></h3>
			<div id="div1">
				<input type="button" value="7" onclick="kick('7')" />
				<input type="button" value="8" onclick="kick('8')" />
				<input type="button" value="9" onclick="kick('9')" />
				<input type="button" value="+" onclick="kick('+')" />
				<input type="button" value="4" onclick="kick('4')" />
				<input type="button" value="5" onclick="kick('5')" />
				<input type="button" value="6" onclick="kick('6')" />
				<input type="button" value="-" onclick="kick('-')" />
				<input type="button" value="1" onclick="kick('1')" />
				<input type="button" value="2" onclick="kick('2')" />
				<input type="button" value="3" onclick="kick('3')" />
				<input type="button" value="*" onclick="kick('*')" />
				<input type="button" value="0" onclick="kick('0')" />
				<input type="button" value="C" onclick="kick('C')" />
				<input type="button" value="=" onclick="kick('=')" />
				<input type="button" value="/" onclick="kick('/')" />
			</div>
		</div>
	</div>
</body>
<script>

	// 分析: 按照按键功能划分 -> 数字  运算符  等于  清除  -> 不同分类执行不同的功能

	// 实现计算器 计算功能: 11 + 22 = 33
	// 1. 先输入第一个数
	// 2. 再输运算符
	// 3. 再输入第二个数
	// 4. 点击等号结算  -> 输出结算的结果

	var resultInp = document.getElementById("result");

	var opt = null; //全局变量 -> 记录被点击的运算符
	var isPressOpt = false; // 全局变量  是否按下运算符
	var beforeVal = null; //全局变量   按下运算符时 记录前一个值
	var isCalc = false;

	function kick(val) {
		// console.log(val);  //统一打印
		// debugger;
		switch (val) {  // 分类打印
			case "+":
			case "-":
			case "*":
			case "/":
				console.log("运算符", val);

				opt = val;
				isPressOpt = true;
				beforeVal = resultInp.value;

				break;
			case "=":
				console.log("等于", val);
				// 开始计算
				// 前一个值(beforeVal)  运算符(opt)  当前值(resultInp.value)
				var res = calc(beforeVal, opt, resultInp.value);
				// beforeVal = resultInp.value;    
				resultInp.value = res;
				isCalc = true;
				break;
			case "C":
				console.log("归零", val);
				// 重置结果 和 运算符 前一个值
				resultInp.value = "0";
				opt = null; //全局变量 -> 记录被点击的运算符
				isPressOpt = false; // 全局变量  是否按下运算符
				beforeVal = null; //全局变量   按下运算符时 记录前一个值
				break;
			default:
				console.log("数字", val);


				// resultInp.value = val;  // 新值 直接 覆盖原值
				// resultInp.value += val;  // 原值拼接新值

				// 1. 初始值(还没开始输入)  2. 已经按下运算符,输入的第一个数字要覆盖
				if (resultInp.value == "0" || isPressOpt == true || isCalc == true) {
					resultInp.value = val;
				} else {
					resultInp.value += val;
				}
				isPressOpt = false;
				break;
		}


	}


	function calc(num1, opt, num2) {
		var result = null;
		switch (opt) {
			case "+": result = num1 * 1 + num2 * 1; break;
			case "-": result = num1 - num2; break;
			case "*": result = num1 * num2; break;
			case "/": result = num1 / num2; break;
			default: result = NaN; break;
		}

		// resultInp.value = result;
		return result;
	}








</script>

</html>